import React from 'react';
import classnames from 'classnames';
import ReCombo from '../ReCombo';
import ReColorPicker from '../ReColorPicker';


export default class view extends React.Component {
    static propTypes = {
        className: React.PropTypes.string,
        color: React.PropTypes.array,
        onChange: React.PropTypes.func,
    };

    static defaultProps = {
        color: [0,0,0,1]
    }

    constructor(props, context) {

        super(props, context);

        // init state;
        this.state = {
            isShow: false,
            color: props.color
        };
    }
    componentWillMount() {
        this._isMounted = true;
    }

    componentDidMount() {

    }

    componentWillReceiveProps({ color }) {
        this.setState({
            color
        });
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    handleChange(data) {

        let rgb = data.rgb;
        let rgba = this.colorToArray(rgb);

        this.setState({
            color: rgba,
        });
        this.props.onChange && this.props.onChange(rgba);
    }

    handleComboStatus(isShow) {
        this.setState({
            isShow
        });
    }

    renderHeader(colorStyle) {
        return (
            <div className="color-combo-header" style={ colorStyle }></div>
        );
    }

    arrayToColor(arr) {
        return 'rgba(' + arr.join(',') +')';
    }

    colorToArray(rgba) {
        return [rgba.r, rgba.g, rgba.b, rgba.a];
    }

    renderContent() {
        return (
            <div className="color-combo-content" >
                <ReColorPicker
                    color={ this.arrayToColor(this.state.color) }
                    onChange={ data => this.handleChange(data)}
                />
            </div>
        );
    }

    render() {
        const classNames = classnames({
            'orin-sw-recolorcombo-root': true,
            [this.props.className] : this.props.className ? true : false
        });
        let colorStyle = {
            'backgroundColor': this.arrayToColor(this.state.color)
        };
        return (
            <div className={classNames} >
                <ReCombo
                     header={ this.renderHeader(colorStyle) }
                     content={ this.renderContent() }
                     isShow={this.state.isShow}
                     onChange={ isShow => this.handleComboStatus(isShow) }
                />
            </div>
        );
    }
}
